<template>
  <div>
    <div style="height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;color: #555555;font-size: 12px;">
      <el-button type="success" class="c-show-code-button"><el-link href="https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4AdvDataFilter.vue" target="_blank" style="color: #ffffff;">查看</el-link></el-button>
      <div style="">
        <div style="line-height: 20px;">节点筛选：</div>
        <el-radio-group v-model="checked_sex" size="mini" @change="doFilter">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="男"></el-radio-button>
          <el-radio-button label="女"></el-radio-button>
        </el-radio-group>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio-group v-model="checked_isgoodman" size="mini" style="margin-left:50px;" @change="doFilter">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button :label="true">..</el-radio-button>
          <el-radio-button :label="false">..</el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <div style="line-height: 20px;">关系筛选：</div>
        <el-checkbox-group v-model="rel_checkList" @change="doFilter">
          <el-checkbox v-for="thisItem in all_rel_type" :key="thisItem" :label="thisItem" />
        </el-checkbox-group>
      </div>
    </div>
    <div style="margin-top:0px;width: calc(100% - 10px);height:calc(100vh - 200px);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>
 
<script>
import SeeksRelationGraph from 'relation-graph'
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      checked_sex: '',
      checked_isgoodman: '',
      rel_checkList: ['爷孙', '父子', '母子', '情人', '兄弟', '夫妻', '养子', '母女', '母子'],
      all_rel_type: ['爷孙', '父子', '母子', '情人', '兄弟', '夫妻', '养子', '母女', '母子'],
      graphOptions: {
        defaultNodeBorderWidth: 0,
        defaultNodeColor: 'rgba(238, 178, 94, 1)',
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultLineShape: 1,
        'layouts': [
          {
            'label': '自动布局',
            'layoutName': 'force',
            'layoutClassName': 'seeks-layout-force'
          }
        ],
        defaultJunctionPoint: 'border'
 
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    }
  },
  created() {
  },
  mounted() {
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      var __graph_json_data = { 'rootId': 'N13', 'nodes': [
          { 'id': 'N1', 'text': '蒋介石', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' }, 
          'innerHTML': '<div class="c-my-node" style="background-image: url(http://www.taiwan.cn/zt/lszt/zhauntilishi/hprw100/201108/W020110829568758571177.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋介石</div></div>' }, 

       { 'id': 'N2', 'text': '宋美龄', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '女' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pica.zhimg.com/82742af656fb3bde16b660748a742980_1440w.jpg?source=172ae18b);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">宋美龄</div></div>' },
       
       { 'id': 'N3', 'text': '陈洁如', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-29f6757a32c7336b538a14061bd0b2ca_1440w.jpg?source=172ae18b);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">陈洁如</div></div>' },
       
       { 'id': 'N4', 'text': '蒋经国', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' }, 

       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/80/v2-da037c6a6a9dd50b3324446e03811db0_720w.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋经国</div></div>' },
       
       { 'id': 'N5', 'text': '蒋纬国', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-4c0320d90cdc754d0aba3272f7cecc37_1440w.jpg?source=172ae18b);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋纬国</div></div>' },
       
       { 'id': 'N6', 'text': '蒋方良', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/80/v2-6177b816fe9dee9ebf080b95c6626b54_720w.jpg?source=1940ef5c);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">蒋方良</div></div>' },
       
       { 'id': 'N7', 'text': '章亚若', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-59cb8a3fbbd51262335901a70423a0c8_b.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">章亚若</div></div>' },
       
       { 'id': 'N8', 'text': '石静宜', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic4.zhimg.com/80/v2-6ac60cb09a92fd727e711cbbc05e4c6c_720w.jpg);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">石静宜</div></div>' },
       
       { 'id': 'N9', 'text': '邱爱伦', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/80/v2-9d2d3a1ef1f3b807bc441eb565c0a70d_720w.jpg);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">邱爱伦</div></div>' }, 
       
       { 'id': 'N10', 'text': '蒋孝勇', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-d16717804859ad2887bebe09a579ddea_1440w.jpg?source=172ae18b);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋孝勇</div></div>' }, 
       
       { 'id': 'N11', 'text': '方智怡', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/80/v2-0d4b2a9471b4a4e9256241420fed047c_720w.jpg?source=1940ef5c);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">方智怡</div></div>' }, 
       
       { 'id': 'N12', 'text': '蒋孝慈', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/80/v2-70392aaa2aded54144746b2570b2d2c0_720w.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋孝慈</div></div>' },
       
       { 'id': 'N13', 'text': '赵申德', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-630c410d9a4ca980aaf2564f29fdb6bc_qhd.jpg?source=57bbeac9);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">赵申德</div></div>' },
       
       { 'id': 'N14', 'text': '蒋孝刚', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/v2-11037d907903b515dc5d82a2f2af1dcb_1440w.jpg?source=172ae18b);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">蒋孝刚</div></div>' }, 
       
       { 'id': 'N15', 'text': '王倚慧', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/80/v2-960c636225d2e35627a84be63becabf3_720w.jpg?source=1940ef5c);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">王倚慧</div></div>' },
       
       { 'id': 'N16', 'text': '蒋友松', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '男' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/v2-4474233e7c753ce70d205e6982f84311_b.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋友松</div></div>' },
       
       { 'id': 'N17', 'text': '蒋友柏', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pica.zhimg.com/v2-709f25d54d0d30a8b12d490a04426cb6_qhd.jpg?source=57bbeac9);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">蒋友柏</div></div>' },
       
       { 'id': 'N18', 'text': '蒋友常', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/80/v2-db158707a9dfe32d5a5fcbbd64794bc5_720w.jpg);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">蒋友常</div></div>' }, 
       
       { 'id': 'N19', 'text': '蒋劲菊', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'sexType': '女' },
        'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic3.zhimg.com/v2-49eb5d54a9ac09c5ae9e2eb02c96ca4a_b.jpg);border:#ff875e solid 3px;"><div class="c-node-name" style="color:#ff875e">蒋劲菊</div></div>' }, 
       
       { 'id': 'N20', 'text': '姚怡诚', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '女' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic2.zhimg.com/80/v2-1f9a80fd234b98a48a44d5d5532ab9fb_720w.jpg?source=1940ef5c);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">姚怡诚</div></div>' },
       
       { 'id': 'N21', 'text': '蒋孝严', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 
       'innerHTML': '<div class="c-my-node" style="background-image: url(https://pic1.zhimg.com/v2-cca2a7f6cc460c6d4056a034f1c3a8ec_b.jpg);border:#6cc0ff solid 3px;"><div class="c-node-name" style="color:#6cc0ff">蒋孝严</div></div>' }], 
      
      'links': [{ 'from': 'N6', 'to': 'N1', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 
      'data': { 'type': '师生' }},
       { 'from': 'N1', 'to': 'N3', 'text': '情人', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '情人' }}, 
        { 'from': 'N1', 'to': 'N2', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
       { 'from': 'N1', 'to': 'N4', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }}, 
       { 'from': 'N1', 'to': 'N5', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }},
        { 'from': 'N1', 'to': 'N10', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }}, 
        { 'from': 'N1', 'to': 'N12', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }},
         { 'from': 'N2', 'to': 'N5', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }},
          { 'from': 'N2', 'to': 'N4', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }}, 
          { 'from': 'N2', 'to': 'N10', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }}, 
          { 'from': 'N3', 'to': 'N4', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }}, 
          { 'from': 'N3', 'to': 'N15', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }}, 
          { 'from': 'N4', 'to': 'N1', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }}, 
          { 'from': 'N4', 'to': 'N6', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }},
           { 'from': 'N4', 'to': 'N7', 'text': '情人', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
           { 'from': 'N4', 'to': 'N5', 'text': '兄弟', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '兄弟' }}, 
           { 'from': 'N4', 'to': 'N10', 'text': '儿子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '儿子' }},
            { 'from': 'N5', 'to': 'N8', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
            { 'from': 'N5', 'to': 'N9', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
            { 'from': 'N5', 'to': 'N12', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }},
             { 'from': 'N5', 'to': 'N14', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }},
              { 'from': 'N5', 'to': 'N19', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }},
               { 'from': 'N6', 'to': 'N17', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }}, 
               { 'from': 'N8', 'to': 'N5', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
               { 'from': 'N9', 'to': 'N12', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }},
                { 'from': 'N9', 'to': 'N14', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }},
                 { 'from': 'N9', 'to': 'N19', 'text': '爷孙', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '爷孙' }},
                  { 'from': 'N9', 'to': 'N5', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
                  { 'from': 'N10', 'to': 'N11', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }},
                   { 'from': 'N10', 'to': 'N17', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }},
                    { 'from': 'N10', 'to': 'N18', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }},
                     { 'from': 'N10', 'to': 'N21', 'text': '兄弟', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '兄弟' }},
                      { 'from': 'N11', 'to': 'N17', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }},
                       { 'from': 'N11', 'to': 'N18', 'text': '母子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母子' }}, 
                       { 'from': 'N12', 'to': 'N13', 'text': '夫妻', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '夫妻' }}, 
                       { 'from': 'N12', 'to': 'N19', 'text': '父女', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父女' }}, 
                       { 'from': 'N13', 'to': 'N19', 'text': '母女', 'color': '#ed724d', 'fontColor': '#ed724d', 'data': { 'type': '母女' }},
                        { 'from': 'N14', 'to': 'N15', 'text': '夫妻', 'color': '#ed724d', 'fontColor': '#ed724d', 'data': { 'type': '夫妻' }}, 
                        { 'from': 'N14', 'to': 'N9', 'text': '母子', 'color': '#ed724d', 'fontColor': '#ed724d', 'data': { 'type': '母子' }}, 
                        { 'from': 'N16', 'to': 'N17', 'text': '兄弟', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '兄弟' }}, 
                        { 'from': 'N17', 'to': 'N18', 'text': '兄弟', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '兄弟' }},
                         { 'from': 'N20', 'to': 'N1', 'text': '情人', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '情人' }}, 
                         { 'from': 'N21', 'to': 'N4', 'text': '父子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父子' }}] }
 
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      })
    },
    doFilter() {
      var _all_nodes = this.$refs.seeksRelationGraph.getNodes()
      var _all_lines = this.$refs.seeksRelationGraph.getLines()
      _all_nodes.forEach(thisNode => {
        var _isHideThisLine = false
        if (this.checked_sex !== '') {
          if (thisNode.data['sexType'] !== this.checked_sex) {
            _isHideThisLine = true
          }
        }
        if (this.checked_isgoodman !== '') {
          if (thisNode.data['isGoodMan'] !== this.checked_isgoodman) {
            _isHideThisLine = true
          }
        }
        thisNode.opacity = _isHideThisLine ? 0.1 : 1
      })
      _all_lines.forEach(thisLine => {
        // 注意这里的line和json数据中link不一样，一条线（line）上可以附着多条关系(link),可以通过line.relations获取到这条线上所有的关系数据(link)
        var _isHideThisLine = true
        thisLine.relations.forEach(thisLink => {
          if (this.rel_checkList.indexOf(thisLink.data['type']) === -1) {
            thisLink.isHide = true
          } else {
            _isHideThisLine = false
            thisLink.isHide = false
          }
        })
        // thisNode.opacity = _isShowThisNode ? 1 : 0.1
      })
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .c-my-node{
    background-position: center center;
    background-size: 100%;
    border:#ff8c00 solid 2px;
    height:80px;
    width:80px;
    border-radius: 40px;
  }
  .c-node-name{
    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
  }
</style>
 